<template>
  <div id="map" style="width: 100%; height: 600px;">

  </div>
</template>

<script>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import {TileWMS, XYZ} from "ol/source";

export default {
  name: 'GeoserverLayer',
  props: {
    layers: {
      type: Array,
      required: false,
    },
  },

  mounted() {
    const layer= new TileLayer({
      source: new TileWMS({
        url: 'http://192.168.80.132:8080/geoserver/xgh/wms',
        params: {
          'LAYERS': 'xgh:1比100万北海区河流',
          'TILED': true,
          'FORMAT': 'image/png',
          'VERSION': '1.3.0',
          'CRS': 'EPSG:4326',
        },
        serverType: 'geoserver',
        wrapX: false,
      })
    })

    const view = new View({
      center: [114.239,35.493],
      zoom: 24
    })

    const map = new Map({
      target:'map',
      layers: [layer],
      view: view
    });

    map.once('postrender',() => {
      console.log('map rendered')
      const extent = map.getView().calculateExtent(map.getSize());
      const center = [
        (extent[0] + extent[2]) / 2,
        (extent[1] + extent[3]) / 2,
      ];
      view.setCenter(center);
    })
  }
};

</script>



<style scoped lang="scss">

</style>
